<template>
  <div>
    <div class="outmain ba_f heighthv pad_20 bor_rad5">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>创建满减</span>
        </div>
      </div>
      <div class="mar_t20 flex-bet flex-y-top">
        <div class="flex-g-1">
          <el-form ref="form" :model="form" label-width="180px">
            <el-form-item label="活动名称">
              <el-input v-model="form.name" placeholder="请输入活动名称"></el-input>
            </el-form-item>
            <el-form-item label="活动时间">
              <el-date-picker v-model="timeData" type="datetimerange" align="right" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['08:00:00', '20:00:00']"></el-date-picker>
            </el-form-item>
            <el-form-item label="优惠形式">
              <el-radio-group v-model="form.type">
                <el-radio label="2">阶梯满减</el-radio>
                <el-radio label="1">循环满减</el-radio>
              </el-radio-group>
              <div v-show="form.type=='1'" class="mar_t10">
                <div class="time_item mar_b10" v-for="(item,index) in moneyArr1" :key="index">
                  <span class="mar_lr10">每满</span>
                  <el-input-number v-model="item.fullMoney" controls-position="right" :min="0" :max="100000000" placeholder="门槛金额"></el-input-number>
                  <span class="mar_lr10">元</span>
                  <span class="mar_l20 mar_r10">减</span>
                  <el-input-number v-model="item.money" controls-position="right" :min="0" :max="100000000" placeholder="力度金额"></el-input-number>
                  <span class="mar_lr10">元</span>
                </div>
              </div>
              <div v-show="form.type=='2'" class="mar_t10">
                <div class="time_item mar_b10" v-for="(item,index) in moneyArr" :key="index">
                  <span class="mar_lr10">满</span>
                  <el-input-number v-model="item.fullMoney" controls-position="right" :min="0" :max="100000000" placeholder="门槛金额"></el-input-number>
                  <span class="mar_lr10">元</span>
                  <span class="mar_l20 mar_r10">减</span>
                  <el-input-number v-model="item.money" controls-position="right" :min="0" :max="100000000" placeholder="力度金额"></el-input-number>
                  <span class="mar_lr10">元</span>
                  <!--                                    <el-input placeholder="门槛金额" type="number" v-model="item.full"-->
                  <!--                                              class="inppsf mar_l10" style="width: 190px;">-->
                  <!--                                        <template slot="append">元</template>-->
                  <!--                                    </el-input>-->
                  <!--                                    <span class="mar_l20">减</span>-->
                  <!--                                    <el-input placeholder="力度金额" type="number" v-model="item.reduce"-->
                  <!--                                              class="inppsf mar_l10" style="width: 190px;">-->
                  <!--                                        <template slot="append">元</template>-->
                  <!--                                    </el-input>-->
                  <el-button type="text" @click="delfullArr(index)" class="fon_12 mar_l10">删除</el-button>
                </div>
                <el-button v-show="moneyArr.length<5" type="text" @click="addfullArr">
                  <Icon type="md-add" />添加满减
                </el-button>
              </div>
            </el-form-item>
            <el-form-item label="适用门店" :required='true'>
              <el-radio-group v-model="form.storeType">
                <el-radio label="1">仅本店可用</el-radio>
                <el-radio label="2">全店通用</el-radio>
                <el-radio label="3">指定门店可用</el-radio>
              </el-radio-group>
              <div v-show="form.storeType=='3'">
                <el-scrollbar>
                  <div class="recordBox">
                    <el-table ref="multipleTable" :data="shopTable" tooltip-effect="dark" style="width: 100%">
                      <el-table-column prop="name" label="门店名称"></el-table-column>
                      <el-table-column prop="address" label="门店地址"></el-table-column>
                      <el-table-column label="操作">
                        <template slot-scope="scope">
                          <div class="textbutton">
                            <el-button size="mini" type="text" @click="open2(scope.row,scope.$index)" class>删除</el-button>
                          </div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-scrollbar>
                <div class="addgoods textbutton">
                  <i class="el-icon-plus subjectcolor2"></i>
                  <el-button type="text" class @click="addshop(shopTable)">添加门店</el-button>
                </div>
              </div>
              <div class="yb_margin lh16">全店通用、指定门店可用不适用于门店模式三</div>
            </el-form-item>
            <el-form-item label="选择人群">
              <el-radio-group v-model="form.people">
                <el-radio label="1">全部人群</el-radio>
                <el-radio label="2">新客</el-radio>
                <!--                                <el-radio label="3">会员</el-radio>-->
              </el-radio-group>
            </el-form-item>
            <el-form-item label="适用场景">
              <el-checkbox-group v-model="form.useType">
                <el-checkbox label="1">外卖</el-checkbox>
                <el-checkbox label="2">堂食</el-checkbox>
                <el-checkbox label="3">快餐</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="循环周期">
              <el-checkbox-group v-model="form.week">
                <el-checkbox label="1">周一</el-checkbox>
                <el-checkbox label="2">周二</el-checkbox>
                <el-checkbox label="3">周三</el-checkbox>
                <el-checkbox label="4">周四</el-checkbox>
                <el-checkbox label="5">周五</el-checkbox>
                <el-checkbox label="6">周六</el-checkbox>
                <el-checkbox label="0">周日</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="生效时间">
              <el-radio-group v-model="form.timeType">
                <el-radio label="1">全天</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <div class="flex-g-0 pad_lr_20">
          <div class="fon_16">常见问题</div>
          <el-collapse v-model="collapseName" accordion class="mar_tb10" style="width: 260px">
            <el-collapse-item title="什么是店铺满减？" name="1">
              <div>店铺满减是作用于门店订单的一种优惠形式，可根据店铺的客单、客群设置不同的优惠门槛及力度，最多可设置5档门槛及优惠金额。</div>
            </el-collapse-item>
            <el-collapse-item title="为什么要设置店铺满减？" name="2">
              <div>合理的满减优惠可有效吸引用户下单，提高进店率及转化率。</div>
            </el-collapse-item>
            <el-collapse-item title="店铺满减将在哪里展示？" name="3">
              <div>在门店下单页、活动页面等</div>
            </el-collapse-item>
          </el-collapse>
          <div class="fon_16 mar_t20">活动规则</div>
          <div class="color_9 mar_t10 lh30 fon_13">
            <div>1.活动仅限在线支付订单；</div>
            <div>2.活动成本由商家承担，与店铺其他活动默认同享</div>
          </div>
        </div>
      </div>
    </div>
    <div class="mar_t20 ba_f pad_20 t_c">
      <el-button type="primary" @click="submitForm">立即创建</el-button>
    </div>
    <shopEdit ref="ShopEdit" @fetchData="shopListData"></shopEdit>
  </div>
</template>
<script>
import { postsSaveReduce, getsaveReduce } from '@/api/plug';
import { changeDate } from '@/utils/index';
import shopEdit from '@/views/plugin/plug/components/selectshop';
// import Edit from "@/views/plugin/plug/components/selectgood";

export default {
  components: {  shopEdit },
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.edit();
    }
  },
  data() {
    return {
      form: {
        name: '',
        full: '',
        type: '2',
        fullMoney: '',
        money: '',
        people: '1',
        useType: ['1'],
        storeType: '1',
        week: ['1', '2', '3', '4', '5', '6', '0'],
        timeType: '1'
      },
      timeData: [new Date(), new Date().setMonth(new Date().getMonth() + 3)],
      moneyArr1: [
        {
          fullMoney: '',
          money: ''
        }
      ],
      moneyArr: [
        {
          fullMoney: '',
          money: ''
        }
      ],
      collapseName: '',
      shopTable: []
    };
  },
  methods: {
    async shopListData(data) {
      this.shopTable = data ? data : [];
    },
    open2(row, index) {
      this.$delete(this.shopTable, index);
    },
    addshop(row) {
      if (row) {
        const storeIds = row.map((item) => item.id);
        this.$refs['ShopEdit'].showEdit(storeIds);
      } else {
        this.$refs['ShopEdit'].showEdit();
      }
    },
    addfullArr() {
      let fullObj = { fullMoney: '', money: '' };
      this.$set(this.moneyArr, this.moneyArr.length, fullObj);
    },
    delfullArr(index) {
      this.$delete(this.moneyArr, index);
    },
    async edit() {
      const { data } = await getsaveReduce({ id: this.id });
      this.form2 = this.form;
      this.form = Object.assign(this.form2, data);
      if (data.startTime) {
        this.timeData = [data.startTime, data.endTime];
      }
      if (data.type == '2' && data.moneyArr) {
        this.moneyArr = data.moneyArr.map((v) => ({ fullMoney: v.fullMoney, money: v.money }));
      }
      if (data.type == '1') {
        this.moneyArr1 = data.moneyArr.map((v) => ({ fullMoney: v.fullMoney, money: v.money }));
      }
      if (data.storeInfo) {
        this.shopTable = data.storeInfo ? data.storeInfo : [];
      }
    },
    async submitForm() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          if (this.form.type == '1') {
            this.form.moneyArr = this.moneyArr1;
          } else {
            this.form.moneyArr = this.moneyArr;
          }
          if (this.timeData) {
            this.form.startTime = changeDate(this.timeData[0]);
            this.form.endTime = changeDate(this.timeData[1]);
          }
          if (this.shopTable) {
            this.form.storeArr = this.shopTable.map((item) => item.id);
          }
          const { msg } = await postsSaveReduce(this.form);
          this.$baseMessage(msg, 'success');
          this.$router.go(-1);
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss">
.time_item .el-input {
  width: 180px;
}
</style>
